// tab选项卡
let tabTitle=document.querySelectorAll(".tabTitle")
tabTitle.forEach(function(item){

  console.log(item)

item.onmousemove=function(){


  for(let j=0;j<tabTitle.length;j++){

    tabTitle[j].style.borderTop="1px solid #cecece"

  }
this.style.borderTop="2px solid #74be5f"

}

item.onmouseout=function(){

  this.style.borderBottom="none"
  }
})

// js实现搜索框

let searchList=document.querySelector(".searchList")
let searchBox=document.querySelector(".searchbox")
let searchButton=document.querySelector(".searchbutton")



searchBox.oninput=function(){

let oScript=document.createElement("script")


oScript.src="https://suggest.taobao.com/sug?code=utf-8&q="+searchBox.value+"&_ksTS=1634010764119_222&callback=foo&k=1&area=c2c&bucketid=0";


document.body.appendChild(oScript)
console.log(oScript)}

function foo(data){
let result=data.result;
let str=""

result.forEach((item)=>{
 
str+=`<li class="singleLi">${item[0]}</li>`

})
// li塞进ul里面
searchList.innerHTML=str
// 点击搜索框下的列表中的li进入到列表页
let oLi=document.querySelectorAll(".singleLi")
console.log(oLi)
oLi.forEach(function(item){
  item.onclick=function(){

location.href="../html/list.html"}
}
)
}
// 二级悬浮菜单，点谁谁出现

let dogMenu=document.querySelector(".dog")
let fenlei=document.querySelector(".fenlei")

let xuanfu1=document.querySelector(".xuanfu1")

let xuanfu2=document.querySelector(".xuanfu2")

dogMenu.onmouseover=function(){
 
    xuanfu1.style.display="block"
    xuanfu2.style.display="none"

   dogMenu.style.backgroundColor="#74be5f"
}
dogMenu.onmouseout=function(){


  dogMenu.style.backgroundColor=""

}
fenlei.onmousemove=function(){

    xuanfu1.style.display="none"

    xuanfu2.style.display="block"
    fenlei.style.backgroundColor="#74be5f"

}
fenlei.onmouseout=function(){


  fenlei.style.backgroundColor=""

}

let pss=document.querySelectorAll(".registertitile p");
let uname1=document.querySelector(".username1")
let uname2=document.querySelector(".username2")
let u2=document.querySelector("#username2")
console.log(u2)
let psw1=document.querySelector(".password1")
let psw2=document.querySelector(".password2")

let rButton=document.querySelector(".registerbutton")

let lButton=document.querySelector(".loginbutton")
let rBox=document.querySelector(".registerbox")
// 白块
let rMain=document.querySelector(".registermain")
let lMain=document.querySelector(".loginmain")

let rl=document.querySelector(".rl")
let dirlogin=document.querySelector(".dirlogin")

// 
console.log(rBox)

// 获取首页上的登陆注册按钮
let denglu=document.querySelector(".denglu")
let zhuce=document.querySelector(".zhuce")
let common=document.querySelectorAll("#common")
let cBox=document.querySelectorAll("#commonBox")

// 点击登陆注册两个按钮，出现对应的页面
// for(let i=0;i<common.length;i++){
// common[i].onclick=function(){
// }
// }

denglu.onclick=function(){
    rl.style.display="block";
    rBox.style.display="block"
    lMain.style.display="block";
    rMain.style.display="none";
    lMain.style.zIndex="999"
   
} 
zhuce.onclick=function(){
    rl.style.display="block";
    rBox.style.display="block"
    rMain.style.display="block";
    lMain.style.display="none";
    rMain.style.zIndex="900"
}




pss.forEach((item)=>{
    item.onclick=()=>{
      
        pss.forEach((its)=>{ its.style.color="black";
       })
        item.style.color="red"
      } ;
     
})

// 点击直接登录，跳转到登录页面
pss[1].onclick=function(){
    rl.style.display="block";
    rBox.style.display="block"
    lMain.style.display="block";
    rMain.style.display="none";
    lMain.style.zIndex="999"


}

//注册接口
    // 为给定 ID 的 user 创建请求
   //如果code值为0.说明已经被注册过了

//    点击灰色区域全部消失

rBox.onclick=function(){
    rl.style.display="none";
    rMain.style.display="none";
    rBox.style.display="none";
    lMain.style.zIndex="200"
    rMain.style.zIndex="200"
    rBox.style.zIndex="200"

}


axios.get('http://jx.xuzhixiang.top/ap/api/reg.php?username=uname1.value&password=psw1.value')
.then(function (response) {
  console.log(response);
  rButton.onclick=function(){

    if(response.data.code==1){
  
   rl.style.display="none";
   rMain.style.display="none";

    alert(response.data.msg)
}else{

    alert(response.data.msg)
    uname1.value="";
    psw1.value="";
    rBox.style.display="block";
    rl.style.display="block";
    rMain.style.display="block";
}
  }
  
})
.catch(function (error) {
  console.log(error);
  
});

// 登录接口

// 点击注册页面的直接登录按钮，注册框消失，登录框显示
//点击首页的登录按钮也是注册框消失，登录框显示


axios.get("http://jx.xuzhixiang.top/ap/api/login.php?username=uname1.value&password=psw1.value")
  .then(function (response) {
    console.log(response);

// 点击登录按钮，消失 弹出注册成功


let show=document.querySelector(".show")

let name=document.querySelector(".name")

let uname=document.querySelector(".uname")

lButton.onclick=function(){

    if(response.data.code==1){
        alert(response.data.msg)
     show.style.display="block"
    rMain.style.display="none";
    rBox.style.display="none";
    lMain.style.display="none";
    uname.innerHTML=u2.value;
    denglu.style.display="none";
    zhuce.style.display="none"
    
    localStorage.setItem("uId",response.data.data.id)

}else{

    uname1.value="";
    psw1.value="";

// 文本款内容清空
}
}
  } 
  )
  .catch(function (error) {
    console.log(error);
  });




// 鼠标移到epet上出现悬浮菜单


let epet=document.querySelector(".epet")

let myMenu=document.querySelector(".myMenu")
let collect=document.querySelector(".collect")
let myCollect=document.querySelector(".myCollect")
let phone=document.querySelector(".phone")
let myPhone=document.querySelector(".myPhone")

epet.onmousemove=function(){
 myMenu.style.display="block"

}

myMenu.onmousemove=function(){
  myMenu.style.display="block"
 
 }

myMenu.onmouseout=function(){
  myMenu.style.display="none"
 
 }

 epet.onmouseout=function(){
  myMenu.style.display="none"
 
 }


//  收藏悬浮菜单
collect.onmousemove=function(){
  myCollect.style.display="block"
 
 }

 myCollect.onmousemove=function(){
  myCollect.style.display="block"
  
  }
 
  myCollect.onmouseout=function(){
    myCollect.style.display="none"
  
  }
  collect.onmouseout=function(){
    myCollect.style.display="none"
   
   }


  // 手机移入和移出事件
  phone.onmousemove=function(){

    myPhone.style.display="block"


  }


  myPhone.onmousemove=function(){

    myPhone.style.display="block"


  }


  myPhone.onmouseout=function(){

    myPhone.style.display="none"


  }




  phone.onmouseout=function(){

    myPhone.style.display="none"


  }
